<template>
    <v-layout type="main">
        <el-form ref="form" :model="addForm" :rules="submitRules" label-width="120px" class="alick-add-form">
            <div v-if="algorithm_id == null">
                <h3 class="add-alike-title">基本信息</h3>
                <el-form-item label="名称" prop="name">
                    <el-input type="text" v-model="addForm.name" />
                </el-form-item>
                <el-form-item label="配图">
                    <media-uploader accept=".jpg,.jpeg,.png,.JPG,.JPEG" :src="addForm.avatar"
                        @avatarPath="avatarPath" />
                </el-form-item>
                <el-form-item label="描述" prop="desc">
                    <el-input type="textarea" :rows="3" v-model="addForm.desc" />
                </el-form-item>
            </div>
            <div v-else>
                <el-form-item label="名称" prop="name">
                    {{ addForm.name }} <el-button class="none-type" type="primary"
                        @click="preAddAlgorithm">新增AI市场算法</el-button>
                </el-form-item>
            </div>
            <h3 class="add-alike-title">版本信息</h3>
            <el-form-item label="版本" prop="version">
                <el-input type="text" v-model="addForm.version" readonly />
            </el-form-item>
            <el-form-item label="提交信息" prop="commit_msg">
                <el-input type="textarea" :rows="3" v-model="addForm.commit_msg" />
            </el-form-item>
            <h3 class="add-alike-title">开发环境</h3>
            <div class="node-module">
                <h3 class="node-module-title">主节点</h3>
                <el-form-item label="环境" prop="mainNodeImageId">
                    <el-cascader v-model="mainNode.image_group" :options="imageOptions"
                        :show-all-levels="false"  class="full-extent-select"></el-cascader>
                </el-form-item>
                <el-form-item label="资源组" prop="mainProduct">
                    <el-select  v-model="mainNode.product_id" prop="main_product" class="full-extent-select">
                        <el-option v-for="item in productOptions" :value="item.id" :label="item.name" :key="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <div class="right-btn-box" v-if="slaveNodeList.length == 0">
                    <span class="outin-handle">
                        <a href="javascript:;" @click="addSlaveNode()">增加</a>
                    </span>
                </div>
            </div>
            <div v-for="(tag, i) in slaveNodeList" :key="i">
                <div class="node-module">
                    <h3 class="node-module-title">从节点</h3>
                    <el-form-item label="环境" prop="slaveImage">
                        <el-cascader v-model="tag.image_group" :options="imageOptions"
                            :show-all-levels="false" class="full-extent-select"></el-cascader>
                    </el-form-item>
                    <el-form-item label="资源组">
                        <el-select v-model="tag.product_id" class="full-extent-select">
                            <el-option v-for="item in productOptions" :value="item.id" :label="item.name"
                                :key="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="数量">
                        <el-input-number  v-model="tag.pod_num"></el-input-number>
                    </el-form-item>
                    <div class="right-btn-box">
                        <span class="outin-handle">
                            <a href="javascript:;" @click="delSlaveNode(i)">删除</a>
                            <a href="javascript:;" @click="addSlaveNode()" v-if="i == slaveNodeList.length - 1">增加</a>
                        </span>
                    </div>
                </div>
            </div>

            <div v-if="advanced == true">
                <h3 class="add-alike-title">输入配置 </h3>
                <el-form-item label="数据集">
                    <plug-dataset :dataset_list="dataset_list" @infoDataset="infoDataset" v-if="addForm.dataset_list" />
                </el-form-item>
                <el-form-item label="S3输入">
                    <plug-s3 :in_s3_list="in_s3_list" @infoS3="infoInS3" v-if="in_s3_list" />
                </el-form-item>
                <el-form-item label="预训练模型">
                    <plug-model :model_list="model_list" @infoModel="infoModel" v-if="model_list" />
                </el-form-item>
                <h3 class="add-alike-title">输出配置 </h3>
                <el-form-item label="S3输出">
                    <plug-s3 :in_s3_list="out_s3_list" @infoS3="infoOutS3" v-if="out_s3_list" />
                </el-form-item>
                <el-form-item label="端口映射">
                    <plug-port :port_list="port_list" @infoPort="infoPort" v-if="port_list" />
                </el-form-item>
            </div>
            <div class="right-btn-box">
                <span class="outin-handle">
                    <a href="javascript:;" @click="setAdvanced()">高级设置</a>
                </span>
            </div>
            <el-form-item label=" ">
                <el-button class="none-type" type="primary" @click="submit" v-if="active == 1">确定</el-button>
            </el-form-item>

        </el-form>
        <el-form class="form myself-form">
            <el-dialog :visible.sync="showDialog" title="发布成功" width="440px">
                <h1 class="succeed-hint">发布成功</h1>
                <div class="succeed-btn">
                    <a href="javascript:;" class="start" @click="back">返回</a>
                    <a href="javascript:;" class="go" @click="toMypublish()">立即前往</a>
                </div>
            </el-dialog>
        </el-form>
    </v-layout>
</template>
  
<script>
import { addMarketAlgorithmVersion ,getAuditMarketAlgorithmVersions } from '@/api/marketAlgorithmVersion'
import { getMarketAlgorithmDetail, addMarketAlgorithm } from '@/api/marketAlgorithm'
import { mainImageRule, mainProductRule, slaveImageRule } from '@/utils/rule'
import { getExperimentDetail } from '@/api/notebook'
import { getAllImageGroups, getImageDetail } from '@/api/image'
import { getAllProducts } from '@/api/product'
import plugDataset from '@/components/module/plug-in-dataset'
import plugS3 from '@/components/module/plug-in-s3'
import plugModel from '@/components/module/plug-in-model'
import plugPort from '@/components/module/plug-in-port'
export default {
    data() {
        return {
            active: 1,
            type: process.env.VUE_APP_VERSIONS == 'alpha' ? 1 : 2,
            addForm: { file_source: 1, type: null },
            algorithm: {},
            dataset_list: [],
            in_s3_list: [],
            model_list: [],
            out_s3_list: [],
            port_list: [],
            advanced: false,
            submitRules: {
                name: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 40, message: "长度在1到40个字符" },
                ],
                desc: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 200, message: "长度在1到200个字符" },
                ],
                commit_msg: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 200, message: "长度在1到200个字符" },
                ],
                main_image_id: [
                    { required: true, message: "该项为必填项" },
                ],
                main_product: [
                    { required: true, message: "该项为必填项" },
                ],
                mainNodeImageId: [
                    { required: true, validator: mainImageRule.bind(this, this), trigger: 'change' }
                ],
                mainProduct: [
                    { required: true, validator: mainProductRule.bind(this, this), trigger: 'change' }
                ],
                tagImageId: [
                    { required: true, validator: slaveImageRule.bind(this, this), trigger: 'change' }
                ],
                // port: [
                //   { required: true, message: "请填写端口" },
                // ]
            },
            mainNode: { pod_num: 1, type: 0 },
            slaveNodeList: [],
            imageOptions: [],
            productOptions: [],
            algorithm_id: this.$route.query.algorithm_id,
            experiment_id: this.$route.query.experiment_id,
            showDialog: false
        };
    },
    components: {
        plugDataset,
        plugS3,
        plugModel,
        plugPort
    },
    async created() {
        this.getAllImageGroups()
        this.getProductList()
        this.getDetail()
    },
    mounted() {
        this.addForm.type = this.type
    },
    destroyed() { },
    methods: {
        async getDetail() {
            let res = await getExperimentDetail({ id: this.experiment_id });
            this.getAddForm(res.data)
            this.addForm.status = null
            this.addForm.version = "v1"
            this.addForm.type = this.type
            this.addForm.source = this.algorithm_id
            if (this.algorithm_id) {
                let res = await getMarketAlgorithmDetail({ id: this.algorithm_id })
                this.addForm.version = 'v' + (res.data.version_index + 1)
                this.addForm.algorithm_id = this.algorithm_id
            }
        },
        async setAddForm() {
            this.addForm.node_group_list = []
            this.addForm.type = 1 //深度学习
            this.mainNode.type = 1
            this.mainNode.image_id = this.mainNode.image_group[2]
            this.addForm.node_group_list.push(this.mainNode)
            for (let i = 0; i < this.slaveNodeList.length; i++) {
                this.slaveNodeList[i].type = 2
                this.slaveNodeList[i].image_id = this.slaveNodeList[i].image_group[2]
                this.addForm.node_group_list.push(this.slaveNodeList[i])
            }
            this.addForm.s3_list = []
            for (let i = 0; i < this.in_s3_list.length; i++) {
                this.in_s3_list[i].type = 0
                this.addForm.s3_list.push(this.in_s3_list[i])
            }
            for (let i = 0; i < this.out_s3_list.length; i++) {
                this.out_s3_list[i].type = 1
                this.addForm.s3_list.push(this.out_s3_list[i])
            }
            console.log("print port_list", this.port_list)
            this.addForm.port_list = []
            for (let i = 0; i < this.port_list.length; i++) {
                this.addForm.port_list.push(this.port_list[i])
            }
            this.addForm.dataset_list = []
            for (let i = 0; i < this.dataset_list.length; i++) {
                this.addForm.dataset_list.push(this.dataset_list[i])
            }
            this.addForm.model_list = []
            for (let i = 0; i < this.model_list.length; i++) {
                this.addForm.model_list.push(this.model_list[i])
            }
            this.addForm.business_id = this.experiment_id
            this.addForm.business_type = 1
        },
        async getAddForm(data) {
            this.addForm = data
            this.port_list = []
            this.slaveNodeList = []
            this.in_s3_list = []
            this.out_s3_list = []
            this.model_list = []
            this.dataset_list = []
            for (let node of data.node_group_list) {
                if (node.type == 1) {
                    this.mainNode = node
                    let res = await getImageDetail({ id: this.mainNode.image_id })
                    let mainImage = res.data
                    this.mainNode.image_group = [mainImage.visibility.toString(), mainImage.engine.toString(), mainImage.id]
                } else {
                    let res = await getImageDetail({ id: node.image_id })
                    let slaveImage = res.data
                    let slaveNode = node
                    slaveNode.image_group = [slaveImage.visibility.toString(), slaveImage.engine.toString(), slaveImage.id]
                    this.slaveNodeList.push(slaveNode)
                }
            }
            if (data.s3_list.length > 0)
                for (let s3 of data.s3_list) {
                    if (s3.type == 0) {
                        this.in_s3_list.push(s3)
                    }
                    else {
                        this.out_s3_list.push(s3)
                    }
                }
            if (data.port_list) {
                this.port_list = data.port_list
            }
            if (data.model_list) {
                this.model_list = data.model_list
            }
            if (data.dataset_list) {
                this.dataset_list = data.dataset_list
            }
            if (this.dataset_list.length > 0
                || this.in_s3_list.length > 0
                || this.out_s3_list.length > 0
                || this.model_list.length > 0
                || this.port_list.length > 0) {
                this.advanced = true
            }
            this.$forceUpdate()
        },
        preAddAlgorithm() {
            this.algorithm_id = null
            this.addForm.version = "v1"
        },
        setAdvanced() {
            this.advanced = !this.advanced
        },
        avatarPath(data) {
            this.addForm.avatar = data;
        },
        back() {
            this.$router.back()
            this.showDialog = false
        },
        /**
         * 提交
         */
        submit() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    this.setAddForm()
                    console.log("addForm",this.addForm)
                    if (this.algorithm_id) {
                        await addMarketAlgorithmVersion({ ...this.addForm });
                    } else {
                        let ret = await addMarketAlgorithm({ ...this.addForm });
                        this.addForm = ret.data
                        this.algorithm_id = ret.data.id
                    }
                    this.showDialog = true
                }
            })
        },
        async toDetail() {
            console.log("algorithm_id", this.algorithm_id)
            let ret = await getAuditMarketAlgorithmVersions({ algorithmId: this.algorithm_id })
            let version = ret.data.list[0]
            this.showDialog = false
            let query = {
                id: this.addForm.id,
                version_id: version.id,
                active: 1,
                preview: true
            }
            await this.$router.push({
                path: '/market/code',
                query
            })
        },
        async toMypublish() {
          let query = {
            active: 1
          }
          this.$router.push({
            path: '/my_market',
            query
          })
        },
        infoInS3(s3s) {
            this.in_s3_list = s3s
        },
        infoOutS3(s3s) {
            this.out_s3_list = s3s
        },
        infoModel(models) {
            this.model_list = []
            models.forEach(e => { e.model_version_id = e.id })
            this.model_list = models
        },
        infoPort(ports) {
            this.port_list = ports
            console.log(this.port_list)
        },
        async getProductList() {
            let res = await getAllProducts()
            this.productOptions = res.data
        },

        addSlaveNode() {
            let data = { type: 1, pod_num: 1 }
            this.slaveNodeList.push(data)
        },
        delSlaveNode(i) {
            this.slaveNodeList.splice(i, 1)
        },
        async getAllImageGroups() {
            let res = await getAllImageGroups()
            this.imageOptions = res.data
        },
    },
};
</script>
<style lang="less" scoped>
@import "~@/assets/css/detail-add.less";
</style>